<template>
  <div class="login-tem">

    <div class="content">
      <el-row type="flex"
              justify="space-between"
              align="middle">
        <el-col :span="12">
          <div class="title">IBEM管理系统</div>
        </el-col>
        <el-col :span="12"
                style="text-align: end">
          <div class="title">
            <img src="@/assets/images/login/logo.jpg"
                 class="logo" />
          </div>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="14">
          <img src="@/assets/images/login/zuo.png"
               class="imageLeft" />
        </el-col>
        <el-col :span="10"
                class="login-form-tem">
          <div class="from-content">
            <div class="tips-group">
              <span class="login-title">欢迎登录</span>
              <span class="regist-button"
                    @click="goRegist">注册账号</span>
            </div>
            <el-form ref="formRef"
                     :model="ruleForm"
                     :rules="rules"
                     class="demo-ruleForm">
              <el-form-item prop="user"
                            style="margin-bottom: 20px">
                <el-input v-model="ruleForm.user"
                          maxlength="50"
                          placeholder="请输入用户名"
                          class="myClass-login" />
              </el-form-item>
              <el-form-item prop="passwd"
                            style="margin-bottom: 25px"
                            class="myClass-login">
                <el-input v-model="ruleForm.passwd"
                          type="password"
                          maxlength="20"
                          placeholder="请输入密码"
                          @keyup.enter.native="submitForm('formRef')" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           class="login-btn"
                           :loading="btnLoading"
                           @click="submitForm('formRef')">登录</el-button>
              </el-form-item>
              <el-form-item>
                <div>
                  <div @click="forgetPwdFun"
                       class="forget-pwd">找回密码</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <img src="@/assets/images/login/flw.png"
           class="flw" />
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  name: "Login",
  components: {},
  data() {
    return {
      ruleForm: {
        user: "",
        email: "",
        passwd: ""
      },
      formRef: null,
      rules: {
        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        passwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked: true,
      btnLoading: false,
      captchaImg: ""
    };
  },
  created() {
    //绑定事件
    window.addEventListener("keydown", this.keyDown, true);
  },
  methods: {
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.submitForm("formRef");
      }
    },
    forgetPwdFun() {
      this.$router.push("/forgetPwd");
    },
    agreementFun(type) {
      this.$router.push({ path: "/agreement", query: { type } });
    },
    goRegist() {
      this.$router.push("/register");
    },
    findAccountFun() {
      this.$router.push("/findAccount");
    },
    findPasswordFun() {
      this.$router.push("/findPassword");
    },
    submitForm(formName) {
      if (!this.checked) {
        Message("未同意用户协议与隐私政策");
        return;
      }
      this.btnLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.btnLoading = false;
          this.$store
            .dispatch("user/loginAct", this.ruleForm)
            .then(response => {
              this.btnLoading = false;
              this.$router.replace("/home");
            })
            .catch(() => {
              this.btnLoading = false;
              // this.sendLoginSms();
            });
        } else {
          this.btnLoading = false;
          return false;
        }
      });
    }
  }
};
</script>

<style>
.myClass-login input.el-input__inner {
  border: none;
  border-radius: 0;
  border-bottom: solid 1px #ccc;
  padding: 0;
}
.myClass-login input:-internal-autofill-selected {
  background-color: none !important;
}
.el-input-group__append,
.el-input-group__prepend {
  border-radius: 0;
  border: none;
  border-bottom: solid 1px #ccc;
  background: none;
}
/* .mySlotClass .el-input-group--append .el-input-group__append {
  padding: 0;
  border: none;
} */
</style>
<style scoped lang="scss">
.login-tem {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/login/bg.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
  background-color: #fff;
  width: 68%;
  border-radius: 16px;
  padding: 20px;
  .title {
    color: #212121;
    font-size: 24px;
    font-weight: bold;
    margin-right: 20px;
  }
  .logo {
    width: 100px;
  }
  .imageLeft {
    width: 100%;
  }
  .flw {
    position: absolute;
    right: 28px;
    bottom: 17px;
  }
}

.login-form-tem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .tips-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .login-title {
      font-size: 18px;
      font-weight: bold;
    }
    .regist-button {
      cursor: pointer;
      color: #2d5fee;
      font-size: 12px;
      margin-left: 20px;
    }
  }
  .forget-pwd {
    color: #2d5fee;
    cursor: pointer;
  }
}

.from-content {
  padding: 42px 50px 0;
  width: 420px;
  height: 500px;
  border-radius: 4px;
  position: relative;
}
.tip-img {
  position: absolute;
  right: 10%;
  top: 0;
  width: 30px;
}
.from-content > p {
  /*text-align: left;*/
  font-size: 18px;
  color: #0a0a0b;
  padding-bottom: 35px;
  text-align: left;
  font-weight: 800;
}
.change-form {
  font-size: 14px;
  color: #121212;
  opacity: 0.8;
  cursor: pointer;
  margin-top: 5px;
}
// .change-form:hover {
//   color: #22b7ba;
// }
.login-btn {
  width: 100%;
  border-radius: 4px;
  font-size: 16px;
}
.remember-password {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  font-size: 14px;
}
.remember-password span {
  cursor: pointer;
}
.agreement {
  color: #2d5fee;
}
</style>
